<template>
	<div class="wrapper">
		<view class="header-box">
			<u-navbar height="88rpx" safeAreaInsetTop placeholder bgColor="#FFFFFF" titleStyle="font-size: 16px; font-weight: 500; color: #000000;" class="navbar" @leftClick="leftClick(urlIndex)">
				<view class="u-center-slot" slot="center">
					<view class="nav-title omit">{{ $t('newDeal.UploadCertificate')}}</view>
				</view>
			</u-navbar>
		</view>
		<view class="box-a">
			<view class="text">{{ $t('newDeal.OrderNO') }}</view>
			<view>3753539846</view>
		</view>
		<view class="box-b">
			<view class="title">{{ $t('newDeal.UploadCertificate') }}<text class="gray">{{ `(${uploadList.length}/${uploadLength})` }}</text></view>
			<view class="pic-box">
				<view class="pic-item" v-for="(item, index) in uploadList" :key="index">
					<image :src="item.imageUrlCompress" mode="aspectFill" @click="showPreview(index)" class="img"></image>
					<view class="delete" @click="uploadList.splice(index, 1)"></view>
				</view>
				<view class="to-upload" v-if="uploadList.length < uploadLength" @click="handleUploadImage"></view>
			</view>
		</view>
	</div>
</template>

<script>
import config from "@/config/app.config";
export default {
	name: "SaleUpload",
	data() {
		return {
			urlIndex: 'SaleUpload',
			uploadLength: 3,
			uploadList: [],
      isUpload: false
		};
	},
	methods: {
		//预览
		showPreview(index) {
			let picList = this.uploadList.map(item => {return item.imageUrl})
			uni.previewImage({
				current: index,
				urls: picList,
			});
		},
		// 上传图片
    async handleUploadImage() {
      if (this.isUpload) {
        return uni.showLoading({
          title: this.$t("information.isUploading")
        });
      }
      uni.chooseImage({
        count: 1,
        sourceType: ["camera", "album"],
        success: async (res) => {
          console.log(res);
          if (res.tempFiles[0].size > 5 * 1024 * 1024) {
            uni.showToast({
              title: this.$t("dating.picLimit", {value: 5}),
              icon: "none",
            });
            return
          }
          this.isUpload = true
          uni.showLoading({
            title: this.$t("information.isUploading")
          });
          const result = await this.uploadFilePromise(res.tempFilePaths[0]);
          console.log(result);
          uni.hideLoading();
          this.isUpload = false
          if (this.uploadList.length < this.uploadLength) {
            let urlObj = {
              imageUrl: result.url,
              imageUrlCompress: result.compressImage || result.url
            }
            this.uploadList.push(urlObj)
          }
        },
      });
    },
    //上传路径
    uploadFilePromise(url) {
      console.log(url);
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: config.server + "/app/oss/upload", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          header: {
            Authorization: `Bearer ${this.$store.state.token}`,
            version: config.version,
          },
          formData: {
            user: "upload",
          },
          success: (res) => {
            const resp = JSON.parse(res.data);
            setTimeout(() => {
              resolve(resp.data);
            }, 1000);
          },
          complete: () => {
            this.isUpload = false
            uni.hideLoading();
          }
        });
      });
    },
	},
	onLoad(option) {
		this.getPrePages(this.urlIndex) // 获取上一个页面的路径已经参数
	},
};
</script>

<style lang="scss" scoped>
.wrapper {
	width: 100vw;
	height: 100%;
	padding: 30upx;
	box-sizing: border-box;
}
.header-box {
	.u-center-slot {
		width: 80%;
		margin: 0upx 10%;

		.nav-title {
			font-size: 32upx;
			font-weight: 500;
			color: #000000;
			line-height: 48upx;
			text-align: center;
		}
	}
}
.box-a {
	width: 100%;
	height: 112upx;
	background: #FFFFFF;
	border-radius: 20upx;
	padding: 0upx 20upx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28upx;
	font-weight: 400;
	color: #878787;
	.text {
		color: #000000;
	}
}
.box-b {
	width: 100%;
	padding: 36upx 20upx;
	box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 20upx;
	margin-top: 30upx;
	.title {
		width: 100%;
		font-size: 28upx;
		font-weight: 400;
		color: #000000;
		line-height: 40upx;
		margin-bottom: 30upx;
		.gray {
			color: #878787;
			margin-left: 10upx;
		}
	}
	.pic-box {
		width: 100%;
		display: flex;
		align-items: center;
		.to-upload {
			width: 196upx;
			height: 196upx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-image: url('@/static/image/upload_box.png');
		}
		.pic-item {
			width: 196upx;
			height: 196upx;
			border-radius: 24upx;
			border: 2upx solid rgba(0,0,0,0.05);
			margin-right: calc((100% - 200upx * 3) / 2);
			position: relative;
			&:nth-child(3) {
				margin-right: 0upx;
			}
			.img {
				width: 196upx;
				height: 196upx;
				border-radius: 24upx;
			}
			.delete {
				width: 32upx;
				height: 32upx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-image: url('@/static/image/delete_pic.png');
				position: absolute;
				right: -8upx;
				top: -8upx;
				z-index: 5;
			}
		}
	}
}
</style>